<!doctype html>
<html>
<head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <title>xeokit Example</title>
    <link href="../css/pageStyle.css" rel="stylesheet"/>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js"></script>
</head>
<body>
<input type="checkbox" id="info-button"/>
<label for="info-button" class="info-button"><i class="far fa-3x fa-question-circle"></i></label>
<canvas id="myCanvas"></canvas>
<div class="slideout-sidebar">
    <img class="info-icon" src="../../assets/images/camera_icon.png"/>
    <h1>CameraControl</h1>
    <h2>Custom key mapping</h2>
    <h3>Stats</h3>
    <ul>
        <li>
            <div id="time">Loading JavaScript modules...</div>
        </li>
    </ul>
    <h3>Components Used</h3>
    <ul>
        <li>
            <a href="../../docs/class/src/viewer/Viewer.js~Viewer.html"
               target="_other">Viewer</a>
        </li>
        <li>
            <a href="../../docs/class/src/viewer/scene/CameraControl/CameraControl.js~CameraControl.html"
               target="_other">CameraControl</a>
        </li>
        <li>
            <a href="../../docs/class/src/plugins/XKTLoaderPlugin/XKTLoaderPlugin.js~XKTLoaderPlugin.html"
               target="_other">XKTLoaderPlugin</a>
        </li>
    </ul>
    <h3>Resources</h3>
    <ul>
        <li>
            <a href="http://openifcmodel.cs.auckland.ac.nz/Model/Details/274"
               target="_other">Model source</a>
        </li>
    </ul>
</div>
</body>
<script type="module">

    //------------------------------------------------------------------------------------------------------------------
    // Import the modules we need for this example
    //------------------------------------------------------------------------------------------------------------------

    import {
        Viewer,
        XKTLoaderPlugin,
        Mesh,
        VBOGeometry,
        buildGridGeometry,
        PhongMaterial
    } from "../../dist/xeokit-sdk.min.es.js";

    //------------------------------------------------------------------------------------------------------------------
    // Create a Viewer, arrange the camera
    //------------------------------------------------------------------------------------------------------------------

    const viewer = new Viewer({
        canvasId: "myCanvas",
        transparent: true
    });

    const cameraControl = viewer.cameraControl;
    const scene = viewer.scene;
    const cameraFlight = viewer.cameraFlight;
    const camera = scene.camera;

    viewer.camera.eye = [-8.23, 10.67, 35.26];
    viewer.camera.look = [4.39, 3.72, 8.89];
    viewer.camera.up = [0.10, 0.97, -0.20];

    //------------------------------------------------------------------------------------------------------------------
    // Configure the CameraControl, binding some specific keys to CameraControl actions
    //------------------------------------------------------------------------------------------------------------------

    const input = scene.input;

    cameraControl.navMode = "orbit";
    cameraControl.followPointer = true;

    const keyMap = {};

    keyMap[cameraControl.PAN_LEFT] = [input.KEY_A];
    keyMap[cameraControl.PAN_RIGHT] = [input.KEY_D];
    keyMap[cameraControl.PAN_UP] = [input.KEY_Z];
    keyMap[cameraControl.PAN_DOWN] = [input.KEY_X];
    keyMap[cameraControl.DOLLY_FORWARDS] = [input.KEY_W, input.KEY_ADD];
    keyMap[cameraControl.DOLLY_BACKWARDS] = [input.KEY_S, input.KEY_SUBTRACT];
    keyMap[cameraControl.ROTATE_X_POS] = [input.KEY_DOWN_ARROW, [input.KEY_SHIFT, input.KEY_Q]];
    keyMap[cameraControl.ROTATE_X_NEG] = [input.KEY_UP_ARROW];
    keyMap[cameraControl.ROTATE_Y_POS] = [input.KEY_LEFT_ARROW];
    keyMap[cameraControl.ROTATE_Y_NEG] = [input.KEY_RIGHT_ARROW];
    keyMap[cameraControl.AXIS_VIEW_RIGHT] = [input.KEY_NUM_1];
    keyMap[cameraControl.AXIS_VIEW_BACK] = [input.KEY_NUM_2];
    keyMap[cameraControl.AXIS_VIEW_LEFT] = [input.KEY_NUM_3];
    keyMap[cameraControl.AXIS_VIEW_FRONT] = [input.KEY_NUM_4];
    keyMap[cameraControl.AXIS_VIEW_TOP] = [input.KEY_NUM_5];
    keyMap[cameraControl.AXIS_VIEW_BOTTOM] = [input.KEY_NUM_6];
    keyMap[cameraControl.MOUSE_PAN] = [[input.KEY_SHIFT, input.MOUSE_LEFT_BUTTON]];
    keyMap[cameraControl.MOUSE_ROTATE] = [
        [input.KEY_SHIFT, input.MOUSE_MIDDLE_BUTTON],
        [input.KEY_SHIFT, input.MOUSE_RIGHT_BUTTON]
    ]
    keyMap[cameraControl.MOUSE_DOLLY] = [[input.KEY_CTRL, input.MOUSE_RIGHT_BUTTON]];

    cameraControl.keyMap = keyMap;

    //------------------------------------------------------------------------------------------------------------------
    // Load a model and fit it to view
    //------------------------------------------------------------------------------------------------------------------

    const xktLoader = new XKTLoaderPlugin(viewer);

    const sceneModel = xktLoader.load({
        id: "myModel",
        src: "../../assets/models/xkt/v10/glTF-Embedded/Duplex_A_20110505.glTFEmbedded.xkt",
        edges: true
    });

    sceneModel.on("loaded", () => { // This synchronizes camera.ortho.scale to the model boundary
        cameraFlight.flyTo(sceneModel);
    });

    //------------------------------------------------------------------------------------------------------------------
    // Create a mesh with grid
    //------------------------------------------------------------------------------------------------------------------

    new Mesh(viewer.scene, {
        geometry: new VBOGeometry(viewer.scene, buildGridGeometry({
            size: 300,
            divisions: 60
        })),
        material: new PhongMaterial(viewer.scene, {
            color: [0.0, 0.0, 0.0],
            emissive: [0.4, 0.4, 0.4]
        }),
        position: [0, -1.6, 0],
        collidable: false
    });

    const t0 = performance.now();
    document.getElementById("time").innerHTML = "Loading model...";
    sceneModel.on("loaded", function () {
        const t1 = performance.now();
        document.getElementById("time").innerHTML = "Model loaded in " + Math.floor(t1 - t0) / 1000.0 + " seconds";
    });

</script>
</html>
